<!-- 
    说明： 企业列表页面
 -->
<template>
  <section class="page">
    <!-- 头部导航栏 -->
    <HeaderCom />
    <div class="content-page">
      <img src="@/assets/images/top-bg.png" alt="" class="top-img" />
      <div class="main">
        <div class="nav-com">
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="margin-bottom: 20px"
          >
            <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name: 'hire' }">
              招聘专区
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <span style="color: #3d6cb0">{{
                $route.meta.title || "--"
              }}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <Search ref="searchCom" class="pc_search" />
        <el-empty
          description="暂无相关企业"
          v-if="companyList.length <= 0"
        ></el-empty>
        <CompanyCard :dataList="companyList" v-if="companyList.length > 0" />
        <el-pagination
          class="bottom-page"
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :page-sizes="[24, 36, 48, 60, 72, 84, 96]"
          @size-change="pagesizeHandle"
          @current-change="currentChange"
          :current-page="pageNo"
        >
        </el-pagination>
      </div>
      <FooterMenu />
    </div>
  </section>
</template>

<script>
import FooterMenu from "@/components/footerMenu/index.vue";
import HeaderCom from "@/components/header/index.vue";
import Search from "./components/companySearch.vue";
import CompanyCard from "./components/companyCard.vue"; // 企业列表
import { getCompanyListOld } from "../../request/api";
export default {
  // 组件名称
  name: "companyList",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { HeaderCom, Search, CompanyCard, FooterMenu },
  // 组件状态值
  data() {
    return {
     
      pageNo: 1,
      pageSize: 24,
      total: 0,
      companyList: [],
      searchData: {
        companyAddres: "",
        industry: "",
        companyName: "",
      },
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    $route: {
      handler() {
        setTimeout(() => {
          let keyword = this.$route.query.keyword;
          this.searchData.companyName = keyword;
          this.$refs.searchCom.setOption("key", keyword);
          this.init();
        });
      },
      immediate: true,
    },
  },
  // 组件方法
  methods: {
    pagesizeHandle(val) {
      this.pageSize = Number(val);
       document.body.scrollTop = 10
      document.body.scrollTop = 0
      // firefox
      document.documentElement.scrollTop = 10
      document.documentElement.scrollTop = 0
      // safari
      window.pageYOffset = 10
      window.pageYOffset = 0
      this.init();
    },
    init() {
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        sortingFields: [
          {
            field: "orderNum",
            order: "desc"
          }
        ]
      };
      if (this.searchData.companyName)
        params.companyName = this.searchData.companyName;
      if (this.searchData.industry) params.industry = this.searchData.industry;
      if (this.searchData.companyAddres)
        params.companyAddress = this.searchData.companyAddres;
        getCompanyListOld(params).then((res) => {
        if (res.data) {
          let data_list = res.data.list;
          data_list.forEach((v) => {
            if (v.companyName.length > 7) {
              v.companyName = v.companyName.slice(0, 7) + "...";
            }
            try {
              if (Array.isArray(JSON.parse(v.industry))) {
                v.industry = JSON.parse(v.industry)[1];
                if (v.industry.length > 4) {
                  v.industry = v.industry.slice(0, 4) + "...";
                }
              }
              if (Array.isArray(JSON.parse(v.companyJobDOList))) {
                v.companyJobDOList = JSON.parse(v.companyJobDOList);
                v.companyJobDOList.forEach((vv) => {
                  if (Array.isArray(JSON.parse(vv.city))) {
                    vv.city = JSON.parse(vv.city)[1];
                  }
                });
              }
            } catch {
              () => {};
            }
          });
          this.companyList = data_list;
          this.total = res.data.total;
          document.querySelector(".content-page").scrollTop = 0
        }
      });
    },
    searchFun(data) {
      this.pageNo = 1;
      this.searchData = data;
      this.init();
    },
    currentChange(e) {
      this.pageNo = e;
      this.init();
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.page {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f5f8fa;

  .content-page {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 80px;
    overflow-y: auto;

    .top-img {
      width: 100%;
      height: 170px;
      object-fit: cover;
    }

    .main {
      background: #fff;
      width: 1200px;
      margin: 15px auto 0;
      padding: 24px 30px;

      .nav {
        font-size: 20px;
        color: #37383d;
        line-height: 28px;
        margin-bottom: 30px;
        display: flex;
        align-items: center;

        .el-icon-arrow-right {
          color: #b0b0b0;
          margin: 0 15px;
        }

        .nav-link {
          color: #3d6cb0;
          cursor: pointer;
        }
      }
    }

    .bottom-page {
      margin-top: 20px;
      text-align: center;
    }
  }
}

/deep/ .el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  background: #fff !important;
  border: 1px solid #ebebec;
  border-radius: 4px;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #409eff !important;
  color: #fff;
}
/deep/ .el-breadcrumb__inner {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #37383d;
  line-height: 28px;
  cursor: pointer;
}
// @media screen and (max-width: 1500px) {
//   .main {
//     max-width: 1000px !important;
//   }
// }
@media screen and (max-width: 480px) {
  .page {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f5f8fa;

  .content-page {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 0.6rem;
    overflow-y: auto;

    .top-img {
      width: 100%;
      height: 170px;
      object-fit: cover;
    }

    .main {
      background: #fff;
      width: auto;
      margin: 15px auto 0;
      padding: 0;
      .nav-com{
        display: none;
      }
      .pc_search{
        display: none;
      }
      .nav {
        font-size: 20px;
        color: #37383d;
        line-height: 28px;
        margin-bottom: 30px;
        display: flex;
        align-items: center;

        .el-icon-arrow-right {
          color: #b0b0b0;
          margin: 0 15px;
        }

        .nav-link {
          color: #3d6cb0;
          cursor: pointer;
        }
      }
    }

    .bottom-page {
      margin-top: 0.2rem;
      padding-bottom: 0.2rem;
      text-align: center;
    }
  }
}

}
</style>
